import './App.css';
import React from 'react';

//Day1
import HelloWorld from './Day1/HelloWorld'
import HelloWorldFn from './Day1/HelloWorldFn'
import NumberList from './Day1/NumberList'
import Input from './Day1/Input'
import Fb from './Day1/FibonacciPractice'

//Day2
import Hello from './Day2/Hello'
import Constructor from './Day2/Constructor'
import FetchUser from './Day2/FetchUser'
import FetchUserBtn from './Day2/FetchUserBtn'
import Form from './Day2/Form'
import newForm from './Day2/FormHoc'
// import windowWidthHoc from './Day2/WindowWidthHoc'
import Calc from './Day2/Calc'

//Day3
import FunctionTimer from './Day3/Function'
import FunctionState from './Day3/FunctionState'
import TimerHook from './Day3/TimerHook'
import Reducer from './Day3/Reducer'
import Demo from './Day3/Clock'
import Context from './Day3/Context'

//Day4
import FormInput from './Day4/Input'
import GetUser from './Day4/GetUser'
import UseFormInput from './Day4/UseForm'
import Order from './Day4/Order'

//Practice
import Commonts from './Practice/Commonts'
import MousePosition from './Practice/MouseHoc'
import OrderFood from './Practice/Order'

//AntD
import SearchForm from './AntD/SearchForm'
import WeightForm from './AntD/WeightForm'
import SearchFormEx from './AntD/SearchFormEx'
import TheFirstDay from './AntD/TheFirstDay'

const menus = [
  {
    title: 'Hello World',
    Component: HelloWorld,
    groupTitle: 'Day1',
  },
  {
    title: 'Hello World Fn',
    Component: HelloWorldFn,
  },
  {
    title: 'Number List',
    Component: NumberList,
  },
  {
    title: 'Fb',
    Component: Fb,
  },
  {
    title: 'Input',
    Component: Input,
  },
  {
    title: 'Hello',
    Component: Hello,
    groupTitle: 'Day2',
  },
  {
    title: 'Constructor',
    Component: Constructor,
  },
  {
    title: 'FetchUser',
    Component: FetchUser,
  },
  {
    title: 'FetchUserBtn',
    Component: FetchUserBtn,
  },
  {
    title: 'Form',
    Component: Form,
  },
  {
    title: 'Form Hoc',
    Component: newForm,
  },
  // {
  //   title: 'windowWidthHoc',
  //   Component: windowWidthHoc,
  // },
  {
    title: '计算器',
    Component: Calc,
  },
  {
    title: 'Function',
    Component: FunctionTimer,
    groupTitle: 'Day3',
  },
  {
    title: 'FunctionState',
    Component: FunctionState,
  },
  {
    title: 'TimerHook',
    Component: TimerHook,
  },
  {
    title: 'Context',
    Component: Context,
  },
  {
    title: 'Reducer',
    Component: Reducer,
  },
  {
    title: 'Clock',
    Component: Demo,
  },
  {
    title: 'Form',
    Component: FormInput,
    groupTitle: 'Day4',
  },
  {
    title: 'UseFormInput',
    Component: UseFormInput,
  },
  {
    title: 'Get User',
    Component: GetUser,
  },
  {
    title: 'Order',
    Component: Order,
  },
  {
    title: 'Commonts',
    Component: Commonts,
    groupTitle: 'Practice',
  },
  {
    title: 'MousePosition',
    Component: MousePosition,
  },
  {
    title: '多人点餐',
    Component: OrderFood,
  },
  {
    title: 'AntD-搜索表单',
    Component: SearchForm,
    groupTitle: 'AntD',
  },
  {
    title: 'AntD-称重表单',
    Component: WeightForm,
  },
  {
    title: 'AntD-搜索表单示例',
    Component: SearchFormEx,
  },
  {
    title: 'AntD-Day1',
    Component: TheFirstDay,
  },
]

class App extends React.Component {
  state = {
    menuIndex: 0,
  };

  componentDidMount() {
    const menuIndex = Number(window.location.hash.substring(1));
    this.setState({ menuIndex })
  }

  onMenuChange = menuIndex => {
    this.setState({menuIndex});
    window.location.hash = menuIndex;
  }

  render() {
    const {menuIndex} = this.state;
    const {Component} = menus[menuIndex];
    return (
      <div className="app">
        <div className="menu">
          <ul>
            {menus.map((menu, index) => {
              const isCurrent = index === menuIndex;
              const groupTitle = menu.groupTitle;
              return (
                <li className={isCurrent ? 'active' : ''}
                    onClick={() => this.onMenuChange(index)}
                    key={index}
                >
                  {groupTitle && <h2>{groupTitle}</h2>}
                  {menu.title}
                </li>
              )
            })}
          </ul>
        </div>
        <div className="main">
            <Component />
        </div>
      </div>
    )
  }
} 


export default App;
